<template>
    <div class="ApiControl">
        <view-head></view-head>
        <div class="api-c">
           <ul class="m-menu-list fl-left">
               <li v-for="(item,index) in exchangeData" :key="index" :class="{'active' : tabIndex === index}" @click="changeTab(index,item)">{{item.name}}</li>
               <!--<li>dise</li>-->
           </ul>
            <div class="m-content fl-left">
                <el-form :label-position="labelPosition" :model="formData" :rules="formRules" ref="formData" label-width="100px" >
                    <el-form-item label="api-key" prop="apiKey">
                        <el-input v-model="formData.apiKey"></el-input>
                    </el-form-item>
                    <el-form-item label="secret-key" prop="secretKey">
                        <el-input v-model="formData.secretKey"></el-input>
                    </el-form-item>
                    <el-form-item v-if="isOkex" label="passphrase" prop="passphrase">
                        <el-input v-model="formData.passphrase"></el-input>
                    </el-form-item>
                        <el-form-item  label="买入汇率%" prop="buy_rate">
                            <el-input v-model="formData.buy_rate"></el-input>
                        </el-form-item>
                        <el-form-item  label="卖出汇率%" prop="sell_rate">
                            <el-input v-model="formData.sell_rate"></el-input>
                        </el-form-item>
                    <!--<el-form-item label="描述">-->
                        <!--<el-input type="textarea" v-model="formData.desc"></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item>
                        <el-button type="primary" @click="addOrUpdateEvent('formData')">添加/更新</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/__header.vue'
    export default {
        name: "ApiControl",
        components: {
            'view-head':Header,
        },
        data(){
            var rate = (rule, value, callback) => {
                if(!this.tool_is_number(value)){
                    callback(new Error('输入的格式不合法'));
                    return;
                }
                if (value === '') {
                    callback(new Error('请输入费率'));
                }  else {
                    callback();
                }
            };

            return {
                labelPosition:'left',
                formData:{
                    apiKey:"",
                    secretKey:"",
                    passphrase:"",
                    desc:"",
                    buy_rate:'',
                    sell_rate:''
                },
                formRules: {
                    buy_rate:[
                        { required: true,validator: rate, trigger: 'blur'}
                    ],
                    sell_rate:[
                        { required: true,validator: rate, trigger: 'blur' }
                    ]
                },
                exchangeData:[],
                tabIndex:0,
                exchangeID:"",
                clockIndex:-1,
                isOkex:false
            }
        },
        mounted(){
            this.getExchange();
        },
        methods:{
            getExchange(){//获取交易所
                this.axios
                    .get(this.EXCHANGE)
                    .then(res => {
                        if (res.data.status == 'success') {
                            this.exchangeID=res.data.data[0].id;
                            if(res.data.data[0].name=="Okex"){
                                this.isOkex=true;
                            }else{
                                this.isOkex=false;
                            }
                            this.getExchangeData(this.exchangeID);

                            this.exchangeData=res.data.data;
                        } else {
                            this.$message({message: res.data.msg});
                        }
                    })
                    .catch(res => {

                    });
            },
            getExchangeData(id){
                let _self=this;
                this.axios
                    .get(this.EXCHANGE_API_API+"?exchange_id="+id)
                    .then(res => {
                        let data=res.data.data;
                        if(data){
                            _self.formData.apiKey=data.public_api_key;
                            _self.formData.secretKey=data.private_api_key;
                            _self.formData.passphrase=data.passphrase;
                            _self.formData.desc=data.desc;
                            _self.formData.buy_rate=data.buy_rate,
                            _self.formData.sell_rate=data.sell_rate
                        }else {
                            _self.formData.apiKey='';
                            _self.formData.secretKey='';
                            _self.formData.passphrase='';
                            _self.formData.desc='';
                            _self.formData.buy_rate='',
                            _self.formData.sell_rate=''
                        }
                    })
                    .catch(res => {

                    });
            },
            changeTab(index,item){
                this.tabIndex=index;
                this.exchangeID=item.id;
                if(item.name=="Okex"){
                    this.isOkex=true;
                }else{
                    this.isOkex=false;
                }
                if(this.clockIndex!=index){
                    this.getExchangeData(item.id);
                    this.clockIndex=index;
                }
            },
            addOrUpdateEvent(formName){
                let that=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        that.dataDeail();
                    } else {
                        return false;
                    }
                });
            },
            dataDeail(){
                let param={
                    exchange_id:this.exchangeID,
                    public_api_key:this.formData.apiKey,
                    private_api_key:this.formData.secretKey,
                    passphrase:this.formData.passphrase,
                    buy_rate:this.formData.buy_rate,
                    sell_rate:this.formData.sell_rate
                    //  desc:this.formData.desc
                }
                this.axios
                    .post(this.EXCHANGE_API,param)
                    .then(res => {
                        if (res.data.status == 'success') {
                            this.$message({message: "更新api参数成功",type: 'success'});
                        }else {
                            this.$message({message: res.data.msg});
                        }
                    })
                    .catch(res => {

                    });
            }
        }
    }
</script>

<style scoped lang="scss">
.ApiControl{
    position: relative;
    .api-c{
        width: 1200px; margin: 0 auto; padding-top: 100px;
    }
    .m-menu-list{
        width: 180px; padding: 0 10px; background: #f1f3f4; border-radius: 6px;
        li{
            height: 40px; line-height: 40px; border-bottom: 1px solid #E8E9EC; cursor: pointer;
            &:last-child{ border: none;}
            &.active{color:#409eff;}
        }
    }
    .m-content{
        margin-left: 20px;background: #f1f3f4; border-radius: 6px; width: 600px; padding: 40px;
        height: auto;
    }
}

</style>
